<!-- 
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-09-20 09:33:37
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的消息',
  },
}
</route>
<template>
  <view class="bg-#F6F6F6 overflow-auto w-screen p-20rpx min-h-100vh">
    <view
      class="bg-#fff p-20rpx flex items-center study-cont mt-8rpx"
      v-for="(item, index) in messageList"
      :key="item.id"
      @click="messageDetail(item)"
      :style="{ opacity: item.isRead ? 0.6 : 1 }"
    >
      <view class="w-88rpx h-88rpx mr-18rpx">
        <image
          class="w-88rpx h-88rpx"
          :src="
            item.messageCenterDO.type === 1
              ? '../../static/images/emergent.png'
              : item.messageCenterDO.type === 2
                ? '../../static/images/activity.png'
                : '../../static/images/policy.png'
          "
        ></image>
      </view>
      <view>
        <view class="flex items-center justify-between">
          <view class="message-title mb-12rpx">
            {{
              item.messageCenterDO.type == 1
                ? '紧急警报'
                : item.messageCenterDO.type == 2
                  ? '活动通知'
                  : '政策通知'
            }}
          </view>
          <view
            class="message-time"
            v-if="
              isValidDate(item.messageCenterDO.createTime) &&
              isToday(item.messageCenterDO.createTime)
            "
          >
            今日 {{ formatTime(item.messageCenterDO.createTime, 'HH:mm') }}
          </view>
          <view class="message-time" v-else-if="isValidDate(item.messageCenterDO.createTime)">
            {{ formatTime(item.messageCenterDO.createTime, 'yyyy-MM-dd HH:mm') }}
          </view>
          <view class="message-time" v-else>未知时间</view>
        </view>
        <view class="content">{{ item.messageCenterDO.title }}</view>
      </view>
    </view>
    <wd-loadmore v-if="messageList.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import { getMessage } from '@/service/index/index'
import { formatTime } from '@/utils/index'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const userId = computed(() => userStore.userInfo.residentId)
const state = ref<string>('loading')
const max = ref<number>(60)
const messageList = ref([])
const totalList = ref([])
const query = reactive({
  pageNo: 1,
  pageSize: 10,
  userIds: userId.value,
})

// onLoad(() => {
//   query.userIds = userId.value
//   getMessageList()
//   uni.$on('refreshPage', refreshPage)
// })
// onUnload(() => {
//   uni.$off('refreshPage', refreshPage)
// })
// function refreshPage() {
//   messageList.value = []
//   getMessageList()
// }
onShow(() => {
  query.pageNo = 1
  messageList.value = []
  getMessageList()
})
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getMessageList()
  }, 1000)
}

onReachBottom(() => {
  if (messageList.value.length === max.value) {
    state.value = 'finished'
  } else if (messageList.value.length < max.value) {
    query.pageNo += 1
    loadmore()
  }
})

const messageDetail = (t) => {
  uni.navigateTo({
    url: '/pages/index/messageDetail?id=' + t.id,
  })
}

// 获取消息分页
async function getMessageList() {
  const data: any = await getMessage({ ...query })
  messageList.value.push(...data.data.list)
  max.value = data.data.total
  messageList.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
}

// 判断是否为有效日期字符串
function isValidDate(dateString) {
  if (!dateString) return false
  const date = new Date(dateString)
  return !isNaN(date.getTime())
}

// 判断今日
function isToday(time) {
  const today = new Date().toISOString().split('T')[0]
  const storedDate = new Date(time).toISOString().split('T')[0]
  return today === storedDate
}
</script>
<style scoped>
.content {
  width: 560rpx;
  margin-top: 12rpx;
  overflow: hidden;
  font-size: 32rpx;
  color: rgba(63, 63, 63, 1);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-title {
  font-size: 36rpx;
  font-weight: 500;
  color: rgba(63, 63, 63, 1);
  text-align: left;
}
.message-time {
  font-size: 28rpx;
  color: rgba(63, 63, 63, 1);
  text-align: left;
}
.message-line {
  margin: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
</style>
